<script setup>
import { ref } from "vue";
const option = ref({
  // legend: {
  //   top: "bottom", //筛选
  // },
  // toolbox: { //右上角工具箱
  //   show: true,
  //   feature: {
  //     mark: { show: true },
  //     dataView: { show: true, readOnly: false },
  //     restore: { show: true },
  //     saveAsImage: { show: true },
  //   },
  // },
  title: {
    text: "各朝代科学家数量",
    left: "center",
    top: 8,
    textStyle: {
      color: "#000",
    },
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c}位科学家 (占总和{d}%)",
  },
  series: [
    {
      color: [
        "#D7AFAD",
        "#8dc6c2",
        "#E5CDDD",
        "#C7BED3",
        "#eed046",
        "#738BAD",
        "#85A397",
        "#E1B882",
        "#D9A89A",
        "#B67271",
        "#B1C6E1",
        "#D2A1BF",
        "#9D8DB2",
      ],
      top: 25,
      selectedMode: "single",
      name: "中国古代自然科学家",
      type: "pie",
      radius: [50, 70],
      center: ["50%", "50%"],
      //   roseType: "area",
      // itemStyle: {
      //   borderRadius: 10,
      // },
      //   label: {
      //     position: 'inner',
      //     fontSize: 14
      //   },
      data: [
      // 真实数据（1911年前）
      { value: 27,  name: "元朝"},   // 郭守敬、王祯等
      { value: 89,  name: "唐朝"},   // 僧一行、孙思邈等
      { value: 163, name: "明朝"},   // 李时珍、徐光启等
      { value: 68,  name: "汉朝"},   // 张衡、蔡伦等
      { value: 15,  name: "秦朝"},   // 李冰等水利专家
      { value: 142, name: "宋朝"},   // 沈括、苏颂等
      { value: 32,  name: "先秦"},   // 墨子、鲁班等
      { value: 21,  name: "三国"},   // 马钧等机械专家
      { value: 29,  name: "两晋"},   // 裴秀、葛洪等
      { value: 37,  name: "南北朝"},   // 祖冲之、贾思勰等
      { value: 12,  name: "五代十国"},   // 技术记载较少
      { value: 19,  name: "隋朝"},   // 宇文恺等
      { value: 83,  name: "清朝"}    // 梅文鼎等（截止1911）
    ]
    },
  ],
});
</script>

<template>
  <!-- 科学家页面的饼图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
